<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
    <style type="text/css">
        body {
            background: url(http://file.rdlsmile.com/nkll.jpg) no-repeat;
            background-size:100%;
            no-repate: top center;
            font-size: 12px;
            font-family: "微软雅黑";
        }

        * {
            margin: 0;
            padding: 0;
        }

        /*screen start*/
        .screen {
            width: 300px;
            height: 100px;
            background: #FFF;
        }

        .startDm {
            width: 80px;
            height: 38px;
            margin: 0 auto;
            position: absolute;
            bottom: 10%;
            left: 50%;
            text-align: center;
            text-decoration: none;
            line-height: 38px;
            border-radius: 6px;
            outline: none;
            font-size: 14px;
            color: #000;
            background: #aaa;
            font-family: "微软雅黑";
            cursor: pointer;
            border: 1px solid #ccc;
        }

        .dm {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .dm .d_screen .d_del {
            width: 38px;
            height: 38px;
            background: #aaa;
            display: block;
            text-align: center;
            line-height: 38px;
            text-decoration: none;
            font-size: 20px;
            color: #000;
            border-radius: 19px;
            border: 1px solid #fff;
            z-index: 2;
            position: absolute;
            right: 20px;
            top: 20px;
            outline: none;
        }

        .dm .d_screen .d_del:hover {
            background: #ddceb0;
        }

        .dm .d_screen .d_mark {
            width: 100%;
            height: 100%;
            background: #eee;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.4;
            filter: alpha(opacity=60);
            z-index: 1;
        }

        .dm .d_screen .d_show {
            position: relative;
            z-index: 2;
        }

        .dm .d_screen .d_show div {
            font-size: 26px;
            line-height: 36px;
            font-weight: 500;
            position: absolute;
            top: 76px;
            left: 10px;
            color: #fff;
        }

        /*end screen*/

        /*send start*/
        .send {
            width: 100%;
            height: 76px;
            position: absolute;
            bottom: 0;
            left: 0;
            border: 1px solid #bbb;
        }

        .send .s_filter {
            width: 100%;
            height: 76px;
            background: #000;
            position: absolute;
            bottom: 0;
            left: 0;
            opacity: 0.6;
            filter: alpha(opacity=60);
        }

        .send .s_con {
            width: 100%;
            height: 76px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            text-align: center;
            line-height: 76px;
        }

        .send .s_con .s_text {
            width: 800px;
            height: 36px;
            border: 0;
            border-radius: 6px 0 0 6px;
            outline: none;
        }

        .send .s_con .s_submit {
            width: 100px;
            height: 36px;
            border-radius: 0 6px 6px 0;
            outline: none;
            font-size: 14px;
            color: #fff;
            background: #65c33d;
            font-family: "微软雅黑";
            cursor: pointer;
            border: 1px solid #5bba32;
        }

        .send .s_con .s_submit:hover {
            background: #3eaf0e;
        }

        /*end send*/

    </style>

    <script type="text/javascript">
        String.prototype.endWith = function (str) {
            if (str == null || str == "" || this.length == 0 || str.length > this.length)
                return false;
            if (this.substring(this.length - str.length) == str)
                return true;
            else
                return false;
            return true;
        }
        String.prototype.startWith = function (str) {
            if (str == null || str == "" || this.length == 0 || str.length > this.length)
                return false;
            if (this.substring(0, str.length) == str)
                return true;
            else
                return false;
            return true;
        }
    </script>

    <script type="text/javascript">
        $(function () {
            $("#startDm,.d_del").click(function () {
                $("#startDm,.dm").toggle(1000);
            });
            $("#btn").click(function () {
                send();
            });

            $(".s_text").keydown(function () {
                var code = window.event.keyCode;
                if (code == 13) {//回车键
                    send();
                }
            });
        });

        function launch() {
            var _height = $(window).height();
            var _left = $(window).width() - $("#" + index).width();
            var time = 10000;
            if (index % 2 == 0) {
                time = 20000;
                _top += 80;
            }
            if (_top > _height - 100) {
                _top = 80;
            }
            $("#" + index).css({
                left: _left,
                top: _top,


            });
        }

        function launch() {
            var _height = $(window).height();
            var _left = $(window).width() - $("#" + index).width();
            var time = 10000;
            if (index % 2 == 0)
                time = 20000;
            _top += 80;
            if (_top > _height - 100)
                _top = 80;
            $("#" + index).css({
                left: _left,
                top: _top,
                color: getRandomColor()
            });
            $("#" + index).animate({
                    left: "-" + _left + "px"
                },
                time,
                function () {
                });
            index++;
        }

        function getRandomColor() {
            return '#' + (function (h) {
                return new Array(7 - h.length).join("0") + h
            })((Math.random() * 0x1000000 << 0).toString(16))
        }
    </script>

    <script type="text/javascript">

        var websocket = null;
        var _top = 80;
        var index = 0;
        var host = window.location.host;
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://" + host+ "/ws");
            //alert("已建立连接");
        } else {
            alert("Not Support WebSocket!")
        }

        //连接发生错误是的回调方法
        websocket.onerror = function () {
            setMessageInnerHTML("error");
        };

        //连接成功建立的回调方法
        websocket.onopen = function (event) {
            setMessageInnerHTML("open");
        };

        //接受到消息的回调方法
        websocket.onmessage = function () {
            setMessageInnerHTML(event.data);
        }

        //连接关闭的回调方法
        websocket.onclose = function () {
            setMessageInnerHTML("close");
        }

        //监听窗口关闭事件
        window.onbeforeload = function () {
            websocket.close();
        }

        //消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            //修改背景图
            var imgurl;
            if (innerHTML.startWith("background,")) {
                var cmd = innerHTML;
                imgurl = cmd.split(",")[1];
                document.body.style.background = "url(" + imgurl + ")"
            } else {
                $(".d_show").append("<div id ='" + index + "'>" + innerHTML + "</div>");
            }
            launch();
        }

        //发送消息
        function send() {
            var message = $(".s_text").val();
            $(".s_text").val("");
            websocket.send(message);
        }
    </script>
</head>

<body>

    <a href="#"  class="startDm" id="startDm">开启弹幕</a>

<div class="dm">
    <!--d_screen start-->
    <div class="d_screen">
        <a href="#" class="d_del">关闭弹幕</a>
        <div class="d_mark"></div>
        <div class="d_show"></div>
    </div>
    <!-- end d_screen -->

    <!-- send start -->
    <div class="send">
        <div class="s_filter"></div>
        <div class="s_con">
            <input type="text" class="s_text"/> <input type="button"
                                                       value="发表评论" class="s_submit" id="btn"/>
        </div>
    </div>
    <!-- end send -->
</div>
</body>
</html>